<template>
    <div class="Coupon">
        <div class="coupon-cover">
            <img class="coupon-cover__img" :src="this.coverimgs" alt="">
        </div>
        <div class="coupon-desc">
            <div class="header">
                <div class="header-left">
                    优惠券说明
                </div>
            </div>
            <div class="coupon-body">
                {{desc}}
            </div>
        </div>
        <div class="coupon-info">
            <div class="header">
                <div class="header-left">
                    优惠券说明
                </div>
            </div>
            <div class="info-body">
                <div class="body-left">
                    <div class="left-item"><span class="item-left">优惠金额</span><span class="item-right">{{money}}元</span></div>
                    <div class="left-item"><span class="item-left">适用活动</span><span class="item-right">所有活动</span></div>
                    <div class="left-item"><span class="item-left">适用性别</span><span class="item-right">{{sex}}</span></div>
                    <div class="left-item"><span class="item-left">有效期至</span><span class="item-right">{{timeend}}</span></div>
                    <div class="left-item"><span class="item-left">发行数量</span><span class="item-right">{{limit}}张(领完即止)</span></div>
                </div>
                <div class="body-right">
                    <qrcode value="https://vux.li?x-page=demo_qrcode" type="img" :size="80"></qrcode>
                    <p class="qrcode-name">优惠券二维码</p>
                </div>
            </div>
        </div>
        <div class="coupon-tips">
            <p class="tips-item">领取方式: 微信扫描或长按识别二维码即可存入个人账户</p>
            <p class="tips-item">使用方法: 参加适用优惠券的活动时，自动抵扣相应金额</p>
        </div>
        <div class="coupon-button">
            <x-button plain type="primary">点击查看适用活动</x-button>
        </div>
    </div>
</template>

<script>
import { Qrcode,XButton } from 'vux'
export default {
    name: "Coupon",
    components: {
        Qrcode,
        XButton
    },
    data () {
        return {
            coverimgs: 'src/assets/images/test/coupon/coupon-cover.jpg',
            desc: '优惠券说明优惠券说明优惠券说明优惠券说明优惠券说明优惠券说明优惠券说明优惠券说明优惠券说明优惠券说明',
            money: 20,
            sex: '女士',
            timeend: '2019年1月1日',
            limit: 100

        }
    }
}
</script>

<style lang="stylus" scoped>
.header
    color: #333
    line-height: .78rem
    height: .78rem
    font-size: .3rem
    border-bottom: 1px solid #ececec
    box-sizing:border-box
    box-shadow: 0 0 3px rgba(238,238,238,0.1)
    .header-left
        float: left
        &:before
            content: ''
            float: left
            width: .06rem
            height: .22rem
            background-color: #ed722e
            margin-right: .20rem
            margin-top: .25rem
.Coupon
    .coupon-cover
        height: 0
        padding-bottom: 53%
        background-color: #ddd
        .coupon-cover__img
            width: 100%
    .coupon-desc
        background: #fff
        margin-bottom: .25rem
        .coupon-body
            padding: .25rem
            line-height: .35rem
    .coupon-info
        background: #fff
        margin-bottom: .25rem
        .info-body
            display: flex
            padding: .25rem .25rem 0 .25rem
            .body-left
                .left-item
                    margin-bottom: .3rem
                    font-size: .30rem
                    .item-left
                        color: #999999
                        margin-right: .3rem
            .body-right
                flex: 1
                text-align: center
                .qrcode-name
                    padding: .2rem
                    color: #999999
    .coupon-tips
        padding: .25rem .25rem 0 .25rem
        background: #fff
        .tips-item
            padding-bottom: .3rem
            color: #999999
    .coupon-button
        padding: .2rem
        background-color: #ffffff
        margin-top: .25rem
                    
</style>

